<template>
    <div class="app-container">
         <el-tabs tab-position="left" @tab-click="handleClick">
        <el-tab-pane  v-for="(item,index) in data" :name="index" :label="item">
             <el-table
            :data="tableData"
            style="width: 100%;font-size:12px;"
           :row-style="{height:'30px'}"
           :cell-style="{padding:'3px'}">
            <el-table-column
              prop="fieldName"
              label="表名">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="length"
              label="长度">
            </el-table-column>
             <el-table-column
              prop="isNull"
              label="是否为空">
              <template slot-scope="scope">
            <el-tag>{{scope.row.isNull?'是':'否'}}</el-tag>
              </template>
            </el-table-column>
             <el-table-column
              prop="description"
              label="描述">
            </el-table-column>
          </el-table>
        </el-tab-pane>
    
    </el-tabs>
    </div>
</template>

<script>
import {getTableDictionary,getTableInfo} from '@/api/system/database'
export default {
    data(){
        return{
            data:[],
            tableData:[],
        }
    },
    created(){
        getTableDictionary().then((response)=>{
            this.data=response.data
        })
    },
    methods:{
          //监控tab选择事件
    handleClick(tab, event) {
        getTableInfo(tab.name).then((response)=>{
            this.tableData=response.data
        })
      console.log(tab, event)
    },
    }
    
}
</script>